<template>
  <div class="membership-page">
    <div class="membership-card" v-for="(membership, index) in memberships" :key="index"
      :style="{ backgroundColor: membership.color }">
      <h2 class="membership-title">{{ membership.title }}</h2>
      <p class="membership-description">{{ membership.description }}</p>
      <button class="purchase-button" @click="purchaseMembership(membership)">立即开通</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const memberships = ref([{
  title: '会员',
  description: '尊享资源包特惠服务（普通论文）。',
  color: '#ADD8E6'
},
{
  title: '“A＋”超级会员',
  description: '尊享资源包特惠服务（所有论文）。',
  color: '#fff0e0'
},
{
  title: '“网＋”网院会员',
  description: '尊享资源包特惠服务（共享网院所有资源）。',
  color: '#f0f0ff'
},
{
  title: '“开＋”开大会员',
  description: '尊享资源包特惠服务（共享国开所有资源）。',
  color: '#e0ffe0'
},
{
  title: '“知+”期刊会员',
  description: '尊享资源包特惠服务（期刊文献、博士论文、硕士论文）。',
  color: '#ffe0ff'
},

{
  title: '“知+”博硕会员',
  description: '尊享资源包特惠服务（会议论文、博士论文、硕士论文）。',
  color: '#FFB6C1'
}
]);

const purchaseMembership = (membership) => {
  alert(`您选择了${membership.title}，即将为您开通。`);
};
</script>

<style scoped>
.membership-page {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 20px;
}

.membership-card {
  border-radius: 15px;
  padding: 30px;
  width: 250px;
  margin: 10px;
  text-align: center;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s, box-shadow 0.2s;
}

.membership-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.membership-title {
  font-size: 24px;
  margin-bottom: 10px;
  color: #333;
}

.membership-description {
  font-size: 16px;
  line-height: 1.5;
  color: #666;
}

.purchase-button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
  margin-top: 20px;
}

.purchase-button:hover {
  background-color: #45a049;
  transform: translateY(-2px);
}
</style>